<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<link rel="stylesheet" href="../style/weui/weui.min.css"/>
<link rel="stylesheet" href="../style/custom.css"/>
<script type="text/javascript" src="../script/jquery-2.1.4.js"></script>
<script type="text/javascript" src="../script/commonjs.js?p"></script>
<title><spring:message code="productOutlet"/></title>
<style type="text/css">
body{
    background-color: #efeff4;
}
.weui_label{
    white-space: nowrap;
    width: 5em;
}
.weui_select{
    padding-left: 0;
}
ul li{
    display: inline;
}
</style>
</head>
<body>
<c:set var="headerCode" value="hotProducts"/>
<c:set var="constantHeader" value="true"/>
<%@include file="./common/header.jsp"%>
    <div class="weui_panel weui_panel_access">
        <div class="weui_panel_bd" id="containerDiv">
        <table id="limitForm" style="display:none;">
            <tr>
                <td name="fromIndex" id="fromIndex">${pageQuery.fromIndex }</td>
            </tr>
        </table>
            <%-- <c:forEach var="i" begin="1" end="4" step="1"> --%>
            <c:forEach items="${pageQuery.data }" var="product">
                <a href="javascript:toDetails('<c:out value="${product.productId }"/>');" class="weui_media_box weui_media_appmsg">
                    <%-- <div style="display: none;" id="<c:out value="${product.productId }"/>"></div> --%>
                    <div class="weui_media_hd" style="width:120px; height:67px;">
                        <img class="weui_media_appmsg_thumb" src="../images/vr<c:out value="${product.imageId}"/>.jpg" alt="">
                    </div>
                    <div class="weui_media_bd">
                        <h4 class="weui_media_title">${product.productName }</h4>
                        <p class="weui_media_desc">${product.productProfile }</p>
                        <ul class="weui_media_desc" style="display: inline;">
                            <li style="color: red; font-weight: bold; float: left;">${product.unitPrice }</li>
                            <li onclick="addToCart('<c:out value="${product.productId }"/>')" style="float: left; margin-left: 10px; text-decoration: underline;"><spring:message code="addToCart" /></li>
                        </ul>
                    </div>
                </a>
            </c:forEach>
        </div>
        <a class="weui_panel_ft" href="javascript:queryMoreProducts('limitForm')"><spring:message code="more"/></a>
    </div>
<%@include file="./common/toast.jsp" %>
    <div id="errorList"></div>
<%@include file="./common/footer.jsp" %>
<script>
function queryMoreProducts(formId){
    $("#loadingToast").show();
    //console.log(convertForm2Json("#"+formId));
    var ajaxUrl = "<c:url value="/product/moreproducts.od"/>";
    $.ajax({url: ajaxUrl,
           //data: JSON.stringify(convertForm2Json("#"+formId)),
           data: convertForm2Json("#"+formId),
           dataType: "json",
           //contentType: "application/json",
           type: "POST",
           success: function(data){
               //console.log(data)
               $("#loadingToast").hide();
               if(0 < data.data.length) {
                   $.each(data.data, function(index,item){ // data.data - data is a propery in java object
                       //console.log(item.imageId,item.productName,item.productDescription);
                       appendHtml(item.imageId,item.productName,item.productProfile,item.unitPrice,item.productId);
                   });
                   $("#fromIndex").text(data.fromIndex);
               } else {
                   
               }
           },
           error: function(HttpRequest, textStatus, errorThrown){
               $("#errorList").html(textStatus);
               $("#errorList").append("<br/>"+HttpRequest.status);
               $("#errorList").append("<br/>"+HttpRequest.readyState);
               $("#errorList").append("<br/>"+HttpRequest.responseText);
           }
    });
    //$.post("http://localhost:8080"+$(formId+"action").val(),convertForm2Json(formId),function(){alert("1");},"json");
}

function appendHtml(imageId,productName,productProfile,unitPrice,productId) {
    var html = "<a href=\"javascript:toDetails('"+productId+"');\" class='weui_media_box weui_media_appmsg'>"
               + "<div class='weui_media_hd' style='width:120px; height:67px;'>"
               + "<img class='weui_media_appmsg_thumb' src='../images/vr"+imageId+".jpg' alt=''>"
               + "</div><div class='weui_media_bd'>"
               + "<h4 class='weui_media_title'>"+productName+"</h4>"
               + "<p class='weui_media_desc'>"+productProfile +"</p>"
               + "<ul class='weui_media_desc' style='display: inline;'>"
               + "<li style='color: red; font-weight: bold; float: left;'>"+unitPrice.toFixed(2)+"</li>"
               + "<li onclick=\"addToCart('"+productId+"')\" style='float: left; margin-left: 10px; text-decoration: underline;'><spring:message code='addToCart' /></li>"
               + "</ul>"
               + "</div></a>";
    $("#containerDiv").append(html);
}

// use a flag to avoid trigger <a> link while adding to cart.
var detailContinue = true;

    function toDetails(pid) {
        if (!detailContinue) {
            detailContinue = true;
            return;
        } else {
            location = '<c:url value="/product/'+pid+'/productdetails.od"/>';
        }
    }
    function addToCart(pid) {
        detailContinue = false;
        var ajaxUrl = '<c:url value="/product/'+pid+'/addtocart.od"/>';
        $.ajax({url: ajaxUrl,
               //data: JSON.stringify(convertForm2Json("#"+formId)),
               //data: convertForm2Json("#"+formId),
               //dataType: "json",
               //contentType: "application/json",
               type: "POST",
               success: function(data){
                   toast(data[1]);
                   $("#cartSize").text(data[0]);
               },
               error: function(HttpRequest, textStatus, errorThrown){
                   $("#errorList").html(textStatus);
                   $("#errorList").append("<br/>"+HttpRequest.status);
                   $("#errorList").append("<br/>"+HttpRequest.readyState);
                   $("#errorList").append("<br/>"+HttpRequest.responseText);
               }
        });
    }
    /* 
     function changeLang(lang) {
     location = '<c:url value="/product/products.od?language='+lang+'"/>';
     } */
</script>

<script id="test" type="text/html">
        <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
            <div class="weui_media_hd" style="width:120px; height:67px;">
                <img class="weui_media_appmsg_thumb" src="../images/vr<c:out value="${product.imageId}"/>.jpg" alt="">
            </div>
            <div class="weui_media_bd">
                <h4 class="weui_media_title">${product.productName }</h4>
                <p class="weui_media_desc">${product.productDescription }</p>
            </div>
        </a>
</script>
</body>
</html>